<template>
  <view class="bd" style="height: 100vh">
    <view class="person">
      <userHead></userHead>
    </view>
    <view class="Medical">
      <view class="items bd" v-for="(v, index) in list" :key="index">
        <view class="head flex flex-j-b" @click="goDetail(index)">
          <view class="flex">
            <text>{{ v.department }}</text>
          </view>
          <view class="img">
            <image src="../../../../static/img/mark_right.png" mode=""></image>
          </view>
        </view>
        <view class="uni-item-line" style="padding: 10upx 0"></view>
        <view class="details">
          <view class="mechanism">
            <view class="img">
              <image src="../../../../static/img/mechanism.png" mode=""></image>
            </view>
            <view class="title"> 就诊机构： </view>
            <view class="content">
              {{ v.hospital }}
            </view>
          </view>
          <view class="mechanism">
            <view class="img">
              <image src="../../../../static/img/project.png" mode=""></image>
            </view>
            <view class="title"> 病情描述： </view>
            <view class="content">
              <!-- 血常规、血糖、血脂 -->
              {{ v.represent }}
            </view>
          </view>
          <view class="mechanism">
            <view class="img">
              <image src="../../../../static/img/time.png" mode=""></image>
            </view>
            <view class="title"> 就诊时间： </view>
            <view class="content">
              <!-- 2020.09.21 上午：9:30 -->
              {{ v.visitTime }}
            </view>
          </view>
        </view>
        <view style="border-bottom: 1upx solid #eaeaea"></view>
      </view>
    </view>
    <!-- 添加就诊记录的图标 -->
    <!-- <view class="iconfont iconjilu" @tap="addRecord"></view> -->
    <view class="edit">
      <u-icon
        name="edit-pen-fill"
        color="#fff"
        size="45"
        @tap="addRecord"
      ></u-icon>
    </view>
    <shortcut
      :infos="iscard"
      v-if="isShowMenu"
      @closeMenu="closeMenu"
    ></shortcut>
  </view>
</template>

<script>
import shortcut from "../../../../components/shortcut/shortcut.vue";
import userHead from "../../../../components/home-head/easy_head.vue";
export default {
  components: {
    userHead,
    shortcut,
  },
  data() {
    return {
      iscard: "",
      isShowMenu: false,
      page: {},
      list: [],
    };
  },
  onReachBottom() {
    //console.log('触底了')
    if (this.page.isLastPage) return;
    this.getListMore(this.page.pageNum + 1);
  },
  onReady() {
    // this.getUiStyle();
    let that = this;
    uni.getSystemInfo({
      //调用uni-app接口获取屏幕高度
      success(res) {
        //成功回调函数
        console.log(res.windowHeight); //windoHeight为窗口高度，主要使用的是这
      },
    });
  },
  methods: {
    closeMenu(msg) {
      this.isShowMenu = false;
    },
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    // 获取接种计划
    getList(pageNumber) {
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/medicalRecords/getList", {
          pageNum: pageNumber ? pageNumber : 1,
          pageSize: "10",
        })
        .then((res) => {
          uni.hideLoading();

          if (res.data.code === 200) {
            self.page = res.data.data;
            self.list = res.data.data.list;
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    getListMore(pageNumber) {
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/medicalRecords/getList", {
          pageNum: pageNumber ? pageNumber : 1,
          pageSize: "10",
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            self.page = res.data.data;
            self.list = self.list.concat(res.data.data.list);
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    // 详情
    goDetail(v) {
      let info = this.list[v];
      uni.navigateTo({
        url:
          "/pages/main/child/archives/medical-records-info?obj=" +
          JSON.stringify(info),
      });
    },
    // 去添加记录
    addRecord() {
      uni.navigateTo({
        url: "/pages/main/child/archives/medical-records-add",
      });
    },
  },
  mounted() {
    this.getList();
    uni.onTabBarMidButtonTap((s) => {
      this.isShowMenu = !this.isShowMenu;
    });
  },
  onShow() {
    this.isShowMenu = false;
    this.getList();
  },
};
</script>

<style lang="less" scoped>
//头像部分
.person {
  width: 100%;
  background-color: #18c7e1;
  display: flex;
  align-items: center;
}

.title {
  width: 30%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.Medical {
  width: 100%;
  padding-bottom: 20rpx;
  .items {
    width: 100%;
    padding: 20upx 40upx;

    .head {
      width: 100%;
      font-size: 35upx;
      font-weight: bold;
      color: #18c8e1;

      .img {
        display: flex;
        justify-content: center;
        align-items: center;

        image {
          width: 15upx;
          height: 25upx;
        }
      }
    }

    .details {
      width: 100%;
      padding: 20upx 10upx;
      overflow: hidden;

      .mechanism {
        padding: 5upx 0;
        display: flex;
        align-items: center;

        .img {
          display: flex;
          justify-content: center;
          align-items: center;

          image {
            width: 25upx;
            height: 25upx;
          }
        }

        .title {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 30upx;
          color: #949494;
          padding-left: 10upx;
        }

        .content {
          font-size: 30upx;
          color: #464646;
          width: 70%;
          overflow: hidden;
          text-overflow: ellipsis;
          word-wrap: nowrap;
        }
      }
    }
  }
}

.edit {
  width: 120upx;
  height: 120upx;
  border-radius: 50%;
  background-color: #84e1ef;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  right: 10%;
  bottom: 20%;
  z-index: 11;
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .bd {
    background-color: #1b1c1e !important;
  }
  .t1 {
    color: #ccc !important;
  }
  .content {
    color: #dddfdf !important;
  }
}
</style>